<template>
  <div>
    <el-dialog
      :title="addInfo.isAdd ? '添加分类' : '编辑分类'"
      :visible.sync="addInfo.isShow"
      center
      :before-close="cancel"
    >
      <el-form :model="cateForm" :rules="rules" ref="ruleForm">
        <el-form-item
          label="上级分类："
          prop="pid"
          :label-width="formLabelWidth"
        >
          <el-select v-model="cateForm.pid" placeholder="请选择">
            <el-option label="顶级分类" :value="0"></el-option>
            <el-option
              v-for="item in getCateList"
              :key="item.id"
              :label="item.catename"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="分类名称："
          prop="catename"
          :label-width="formLabelWidth"
        >
          <el-input v-model="cateForm.catename" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          v-if="cateForm.pid != 0"
          label="图片"
          :label-width="formLabelWidth"
        >
          <!-- 
            上传视图 
            action	必选参数，上传的地址	string
            on-preview	点击文件列表中已上传的文件时的钩子	function(file)	—	—
            on-remove	文件列表移除文件时的钩子	function(file, fileList)
            
            on-change	文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
            list-type	文件列表的类型
            auto-upload	是否在选取文件后立即进行上传 默认是true 
            file-list	上传的文件列表, 例如: [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}]	array
            limit	最大允许上传个数	number
            on-exceed	文件超出个数限制时的钩子	function(files, fileList)
            -->
          <el-upload
            action="#"
            :auto-upload="false"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :on-change="onChange"
            :file-list="fileList"
            :limit="1"
            :on-exceed="handleExceed"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <!-- 预览展示 -->
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>
        </el-form-item>
        <el-form-item label="状态：" :label-width="formLabelWidth">
          <el-switch
            v-model="cateForm.status"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="1"
            :inactive-value="2"
          >
          </el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" v-if="addInfo.isAdd" @click="add('ruleForm')"
          >确 定</el-button
        >
        <el-button type="primary" v-else @click="update('ruleForm')"
          >编 辑</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
// 引入封装好的接口模块
import { getCateAdd, getCateInfo, getCateEdit } from "../../util/axios";
export default {
  data() {
    return {
      formLabelWidth: "120px", //label宽度
      dialogImageUrl: "", //预览图片地址
      dialogVisible: false, //预览的弹框默认是false
      imgUrl: "", //文件图片的配置对象
      fileList: [], //文件列表
      cateForm: {
        pid: 0, //上级分类编号 int型
        catename: "", //商品分类名称
        img: "", //图片(文件，一般用于二级分类)
        status: 1 //状态1正常2禁用
      },
      rules: {
        catename: [
          { required: true, message: "请输入分类名称", trigger: "blur" },
          { min: 2, max: 8, message: "长度在 2 到 8 个字符", trigger: "blur" }
        ],
        pid: [{ required: true, message: "请选择上级分类", trigger: "change" }]
      },
      formLabelWidth: "120px",
      fileList: [] //文件列表
    };
  },
  // 接收父组件传过来的值
  props: ["addInfo"],
  // 封装一个取消事件,子传父
  methods: {
    //文件上传的限制
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 1 个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      );
    },
    onChange(file) {
      // console.log(file, "file文件");
      this.imgUrl = file.raw;
    },
    // 预览删除
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    // 放大预览
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    cancel() {
      this.$emit("cancel", {
        isShow: false,
        isAdd: this.addInfo.isAdd
      });
      // 关闭弹框时执行重置事件
      this.reset();
    },
    ...mapActions({
      // 分类列表一触发就调取菜单列表
      getCateListAction: "cate/getCateListAction"
    }),
    add(formName) {
      // this.$refs.tree.getCheckedKeys() 这种方式取值出来的是数组格式  需要转换为"1,2"的格式
      // console.log(this.$refs.tree.getCheckedKeys(), "通过key去获取节点");
      // 添加方法执行，触发validate验证器
      this.$refs[formName].validate(valid => {
        if (valid) {
          // 上传图片框的逻辑
          this.cateForm.img = this.imgUrl;

          /* // 图片上传框 封装到 全局中   util中的index中 (方法一)
          //对于有上传文件的数据，我们要用构造函数FormData去转化
          let file = new FormData();
          //FormData 数据的添加只能用append ,获取值也只能用get方式获取
          //循环添加 对象 转化成了 FormData这种格式
          for (let i in this.cateForm) {
            file.append(i, this.cateForm[i]);
          }
          file.append("img", this.imgUrl); */
          // 方法一得把下面的  getCateAdd后面的参数改为 file

          // 调取添加接口
          //菜单权限 存放的是菜单编号，用逗号隔开 '[1,2,3]'
          getCateAdd(this.cateForm).then(res => {
            // console.log(res, "添加成功时的响应");
            if (res.data.code == 200) {
              this.$message.success(res.data.msg);
              // 关闭弹框并重置
              this.cancel();
              // 重新获取列表
              this.getCateListAction();
            } else {
              this.$message.error(res.data.msg);
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    /* 
    enctype 类型： 
      application/x-www-form-urlencoded	在发送前编码所有字符（默认）
      multipart/form-data	不对字符编码。在使用包含文件上传控件的表单时，必须使用该值。

      如果我们有上传文件，那么我们的编码格式，就必须是formData格式，否则浏览器无法解析
    */
    //封装一个修改事件
    update(formName) {
      //修改方法执行，触发validate验证器
      this.$refs[formName].validate(valid => {
        if (valid) {
          //调取添加接口
          //针对于图片进行一下判断
          //this.imgUrl 它是图片对象配置。如果你修改的时候，修改了它，那么把它重新传到接口中，如果本次修改你没有修改它，那么就沿用上一次数据库的值
          this.cateForm.img = this.imgUrl ? this.imgUrl : this.cateForm.img;
          let file = new FormData();
          for (let i in this.cateForm) {
            file.append(i, this.cateForm[i]);
          }
          //调取修改接口
          getCateEdit(file).then(res => {
            if (res.data.code == 200) {
              this.$message.success(res.data.msg);
              //关闭弹框并重置
              this.cancel();
              //重新获取列表
              this.getCateListAction();
            } else {
              this.$message.error(res.data.msg);
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 封装一个重置事件
    reset() {
      this.cateForm = {
        pid: 0, //上级分类编号 int型
        catename: "", //商品分类名称
        img: "", //图片(文件，一般用于二级分类)
        status: 1 //状态1正常2禁用
      };
      // 封装重置角色权限树形结构
      // this.$refs.tree.setCheckedKeys([]);
    },
    // 封装一个查询一条数据的方法
    lookUp(id) {
      //调取查询接口
      getCateInfo({ id }).then(res => {
        // console.log(res, "查询角色中的一条数据");
        if (res.data.code === 200) {
          this.cateForm = res.data.list;
          this.cateForm.id = id;
          // 当查询数据调取接口 ，给 fileList 数组赋值
          this.fileList = this.cateForm.img
            ? [{ url: this.$imgUrl + this.cateForm.img }]
            : "";
        }
      });
    }
  },
  computed: {
    ...mapGetters({
      getCateList: "cate/getCateList"
    })
  }
};
</script>

<style lang="" scoped></style>
